<template>
    <div>
        <div>{{name}}</div>
        <div>{{num}}</div>
        <div>{{obj.message}}</div>
        <div>{{obj}}</div>
        <button @click="goto">路由跳转</button>
        <!-- <nav-header></nav-header>
        <nav-main></nav-main>
        <nav-footer></nav-footer> -->
        <!-- <div>{{list}}</div> -->
    </div>
    <!-- <div v-on:click="clickNum(888)">{{num}}</div>
    <div v-on:click="clickNum1">{{num1}}</div>
    <div>{{addNum}}</div>
    <div>{{num1}}---{{num2}}</div>
    <button @click="add">add</button> -->
    <!-- <div>{{name}}</div>
    <div>{{arr}}</div>
    <ul>
        <li v-for="x in arr" :key="x">
            {{x}}
        </li>
    </ul>
    <div>{{obj}}</div>
    <div>{{obj.name}}</div>
    <div>{{obj.sex}}</div> -->
</template>
<script>
    import NavHeader from '@/components/navHeader/NavHeader.vue'
    import NavFooter from '@/components/navFooter/NavFooter.vue'
    import NavMain from '@/components/navMain/NavMain.vue'
    import {
        useRouter,
        useRoute
    } from 'vue-router'
    import {
        defineComponent,
        ref,
        reactive,
        toRefs,
        computed,
        onMounted
    }

    from 'vue'
    import {
        useStore
    } from 'vuex'

    export default defineComponent({
            name: 'Home',
            components: {
                NavHeader,
                NavMain,
                NavFooter
            },
            setup(props, ctx) {
                // let store = useStore();
                // let list = computed(() => {
                //     return store.state.list
                // })
                let num = ref(null)
                let name = ref('')
                let obj = ref({})
                onMounted(() => {
                    num.value = route.query.num * 1
                    name.value = route.query.name
                    obj.value = JSON.parse(route.query.obj)
                })
                //当前路由对象
                let route = useRoute()

                //全局路由对象
                let router = useRouter();
                console.info(router)
                let goto = () => {
                    //console.info("66666")
                    //路由跳转
                    //back
                    //forward
                    //go(整数)
                    //传入跳转的路径
                    router.push('/about')
                }

                // console.info(store)
                // let num=ref(10)
                // let name=ref('jack')
                // let arr=ref(['a','b','c','d'])
                // let obj=ref({'name':'张三','sex':'男'})
                // return{ num,name,arr,obj}
                // let num1 = ref(999)
                // let num2 = ref(777)
                // let data = reactive({
                //     name: "jack",
                //     num: 100,
                //     arr: ['a', 'b', 'c', 'd'],
                //     obj: {
                //         'name': '张三',
                //         'sex': '男'
                //     }

                // })
                // let clickNum = (val) => {
                //     alert(data.num)
                //     alert(val)
                // }
                // let clickNum1 = () => {
                //     alert(num1.value)
                // }
                // let addNum = computed(() => {
                //     return num1.value + num2.value
                // })
                // let add = (() => {
                //     num1.value++,
                //     num2.value++
                // })
                return {
                    // list,
                    goto,
                    num,
                    name,
                    obj
                    //data 
                    // ...toRefs(data),
                    // num1,
                    // clickNum,
                    // clickNum1,
                    // num2,
                    // add,
                    // addNum
                }
            }
        }

    )
</script>
<style lang="scss" scoped></style>